<template>
	<view class="receivePraise">
		<SRV-topbar  title="小黄人急救：点赞"></SRV-topbar>
		<view class="item" v-for="(item,index) in pageResult.list" :key="index" @click="jump('home', item.member_id)">
			<view class="left">
			<SRV-profile :potos="item.head_portrait" :topicon="item.topicon" :srvhour="item.total_time" size="140"></SRV-profile>
			</view>
			<view class="right">
				<view class="txt">
					<text>{{item.member_name}}</text>
					<text>{{item.time}}</text>
				</view>
				<view class="txt1">
					<text v-for="(option,index2) in item.optionList">{{option}}</text>
				</view>
			</view>
		</view>
		<view v-if="pageResult.list == 0" class="nocontent">
			<image src="http://app.chinasrv.com/attachment/xcx/icon/nomsg.png" mode="widthFix"></image>
			<text>暂未找到记录～</text>
		</view>
		
		<footer-bar></footer-bar> 
		
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				url: '',
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					'local-city': uni.getStorageSync('localCity'),
					id:0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getList() {
				var self = this;
				self.pageParam.page ++;
				serve
					.request({
						url: self.url,
						data: self.pageParam
					})
					.then(res => {
						if(res.code == 200) {
							if (res.data && res.data.length > 0) {
								self.pageResult.list = self.pageResult.list.concat(res.data);
							}
							self.pageResult.isEmpty = self.pageResult.list.length == 0;
							self.pageResult.isEnd = res.data.length == 0; 
						} else {
							uni.showToast({
								title:res.message,
							})
						}
					});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			this.pageParam.id = options.id || 0;
			if(options.type == 'medal') {
				this.url = '/member/medal-zan/index';
			} else if(options.type == 'dynamic') {
				this.url = '/dynamic/zan/index';
			} else if(options.type == 'article') {
				this.url = '/article/zan/index';
			} else if(options.type == 'course') {
				this.url = '/course/zan/index';
			} else if(options.type == 'activity') {
				this.url = '/activity/zan/index';
			} else if(options.type == 'duty') {
				this.url = '/member/duty/zan-list';
			}
			if(this.pageParam.id == 0 || this.url == '') {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							common.jump('index');
						}, 1000) 
					}
				});
			}
			this.pageParam.page = 0;
			this.pageResult.list = [];
			this.getList();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.pageParam.page = 0;
			this.pageResult.list = [];
			this.getList();
		},
		onReachBottom() {
			console.log('触底'); 
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.receivePraise {
		width: 100%;
		padding-bottom: 140upx;

		.item {
			padding: 48upx 30upx;
			display: flex;
			border-bottom: 1upx rgba(57, 72, 107, 0.1) solid;

			.left {
				image {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
				}
			}

			.right {
				margin-left: 29upx;
				width: 560upx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.txt {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 36upx;
					font-weight: bold;

					text:last-child {
						color: rgba(60, 72, 104, 0.5);
						font-size: 24upx;
						font-weight: 400;
					}
				}

				.txt1 {
					color: #8F96A9;
					font-size: 24upx;
					margin-top: 16upx;
					text{
						margin-right: 20upx;
					}
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220upx;
				height:124upx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}

	}
</style>
